<template>
    <div>
        <div class="container">
        <div class="mi-header">
            <!-- <router-link tag="div" to="/login" class="headers" >
                <img src="../assets/img/下载 (14).png" alt="">
                <div class="name">
                    <h2>未登录</h2>
                </div>
                
            </router-link> -->
            <div class="headers">
                <img src="../assets/img/portrait-default (1).png" alt="">
                <div class="name">
                    <h2>182***8435</h2>
                    <img src="../assets/img/general.png" alt="">
                </div> -->
                
             </div>
        </div>
        <div class="information">
            <router-link tag="div" to="/card" class="informations">
                <h4>完善身份信息<span>&gt;</span></h4>
                <p>去完成身份认证，租车更便捷</p>
                <div class="xian"></div>
            </router-link>
        </div>
        <div class="mi-main">
            <div class="mains">
                <h3>我的钱包</h3>
                <ul>
                    <router-link tag="li" to="/coins">
                        <p>0</p>
                        <p>凹凸币</p>
                    </router-link>
                    <router-link tag="li" to="/balance">
                        <p><span style="font-size: 10px;">￥</span>0</p>
                        <p>余额</p>
                    </router-link>
                </ul>
            </div>

            <div class="mains">
                <h3>省钱秘诀</h3>
                <ul>
                    <li>
                        <img src="../assets/img/icon-coupon.png" alt="">
                        <p style="margin-top:5px ;">优惠卷</p>
                    </li>
                    <li>
                        <img src="../assets/img/icon-deratedeposit.png" alt="">
                        <p style="margin-top:5px ;">余额</p>
                    </li>
                </ul>
            </div>

            <div class="mains">
                <h3>订单小工具</h3>
                <ul>
                   
                    <router-link tag="li" to="/bill">
                        <img src="../assets/img/4.png" alt="">
                        <p style="margin-top:5px ;">长租订单</p>
                    </router-link>
                    <router-link tag="li" to="/bill">
                        <img src="../assets/img/5.png" alt="">
                        <p style="margin-top:5px ;">我的长租</p>
                    </router-link>
                    <router-link tag="li" to="/billing">
                        <img src="../assets/img/6.png" alt="">
                        <p style="margin-top:5px ;">申请发票</p>
                    </router-link>
                </ul>
            </div>

            <div class="mains">
                <h3>省钱秘诀</h3>
                <ul>
                    <li>
                        <img src="../assets/img/7.png" alt="">
                        <p style="margin-top:5px ;">凹凸商城</p>
                    </li>
                    <li>
                        <img src="../assets/img/8.png" alt="">
                        <p style="margin-top:5px ;">违章</p>
                    </li>
                    <li>
                        <img src="../assets/img/9.png" alt="">
                        <p style="margin-top:5px ;">新手指引</p>
                    </li>
                </ul>
            </div>

            <div class="other">
                <h3>其他</h3>
                <router-link tag="p" to="/setup">设置<span>&gt;</span></router-link>
                <p>关于我们<span>&gt;</span></p>
            </div>
        </div>

        <div class="footer">
            <ul>
                <router-link tag="li" to="/home">
                    <img src="../assets/img/下载 (8).png" alt="">
                    <p>首页</p>
                </router-link>
                <router-link tag="li" to="/collection">
                     <img src="../assets/img/下载 (1).png" alt="">
                    <p ><a href="./index2.html">收餐</a></p>
                </router-link>
                <router-link tag="li" to="/itinerary">
                     <img src="../assets/img/下载 (2).png" alt="">
                    <p><a href="./index3.html">行程</a></p>
                </router-link>
                <li>
                     <img src="../assets/img/下载 (12).png" alt="">
                    <p class="active"><a href="">我的</a></p>
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
    export default {
        data(){
          return{
            flag:true,
          }
        }
    }
</script>

<style lang="scss">
.mi-header {
  width: 100%;
  margin-top: 35px;
  .headers {
    width: 90%;
    height: 85px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
      margin-right: 18px;
    }
    .name {
      img {
        width: 100px;
        height: 20px;
        margin-top: 5px;
      }
    }
  }
}
.information {
  width: 100%;
  .informations {
    width: 90%;
    height: 100px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 10px #eee;
    h4 {
      padding-top: 20px;
      padding-left: 20px;
      & > span {
        float: right;
        color: #e3e2e6;
        margin-right: 20px;
      }
    }
    p {
      padding-top: 8px;
      padding-left: 20px;
      font-size: 14px;
      color: #63637b;
    }
    .xian {
      width: 90%;
      height: 4px;
      background-color: #f5f5f5;
      margin: 0 auto;
      border-radius: 20px;
      margin-top: 12px;
    }
  }
}
.mi-main {
  width: 100%;
  margin-top: 20px;
  .mains {
    width: 90%;
    height: 140px;
    margin: 0 auto;
    border-top: 1px solid #eae9e9;
    border-bottom: 1px solid #eae9e9;
    h3 {
      margin-top: 24px;
    }
    ul {
      width: 100%;
      height: 81px;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 111px;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        p {
          &:nth-child(1) {
            font-size: 25px;
            margin-top: 10px;
          }
          &:nth-child(2) {
            color: #4f4f6a;
            font-size: 14px;
          }
        }
        img {
          width: 30px;
          height: 30px;
          margin-top: 15px;
        }
      }
    }
  }
  .other {
    width: 90%;
    height: 190px;
    margin: 0 auto;
    border-top: 1px solid #eae9e9;
    border-bottom: 1px solid #eae9e9;
    padding-bottom: 65px;
    h3 {
      margin-top: 24px;
    }
    p {
      margin-top: 30px;
      color: #4f4f6a;
      font-size: 15px;
      & > span {
        float: right;
        color: #d8d8de;
      }
    }
  }
}
.footer {
  width: 100%;
  bottom: 0;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  ul {
    width: 100%;
    height: 65px;
    display: flex;
    justify-content: center;
    li {
      width: 94px;
      height: 100%;
      img {
        width: 35px;
        height: 35px;
        margin: 3px 30px;
      }
      p {
        text-align: center;
        font-size: 13px;
        line-height: 8px;
      }
      .active {
        a {
          color: #00cf97;
        }
      }
    }
  }
}

</style>